<template>
  <div class="demo">
    <div class="demo-title">预设状态的标签</div>
    <div class="demo-content">
      <Divider orientation="left">Without icon</Divider>
      <div>
        <Tag color="success">success</Tag>
        <Tag color="processing">processing</Tag>
        <Tag color="error">error</Tag>
        <Tag color="warning">warning</Tag>
        <Tag color="default">default</Tag>
      </div>
      <Divider orientation="left">With icon</Divider>
      <div>
        <Tag color="success">
          <template #icon><CheckCircleOutlined /></template>
          success
        </Tag>
        <Tag color="processing">
          <template #icon><SyncOutlined :spin="true" /></template>
          processing
        </Tag>
        <Tag color="error">
          <template #icon><CloseCircleOutlined /></template>
          error
        </Tag>
        <Tag color="warning">
          <template #icon><ExclamationCircleOutlined /></template>
          warning
        </Tag>
        <Tag color="default">
          <template #icon><ClockCircleOutlined /></template>
          waiting
        </Tag>
        <Tag color="default">
          <template #icon><MinusCircleOutlined /></template>
          stop
        </Tag>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import {
    CheckCircleOutlined,
    SyncOutlined,
    CloseCircleOutlined,
    ExclamationCircleOutlined,
    ClockCircleOutlined,
    MinusCircleOutlined,
  } from '@ant-design/icons-vue';
  import Divider from '@sscd/divider';
  import Tag from '@sscd/tag';
</script>
